<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px solid #e6e6e6;
        }
        .sub {
            display: none;
        }
		#result{
			display: inline;
		}
		#flooter{
			padding: 1%;
			padding-left: 10%;

		}
		#label{
			font-size: 20px;
			display: inline;

		}
    </style>
</head>
<link rel="stylesheet" type="text/css" href="../static/css/default.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/normalize.css"/>
<body>
	
<div class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>手写体识别</h1>
	</header>
	
	<div class="htmleaf-content bgcolor-8">
		   <div align="center" class="i-canvas">
				<canvas id="canvas" width = "800" height = "600"></canvas>
				<ul>
					<button onclick="exportCanvasAsPNG()">我要重来</button>
					<button onclick="UploadPic()">猜猜是几</button>
				</ul>
		   </div>
		
	</div>
	<p id="label">我猜你写的数字是：</p><p id="result">*****</p>

</div>
<!--    <canvas id="canvas" width = "800" height = "600"></canvas>
	<button onclick="exportCanvasAsPNG('canvas','./')">保存</button> -->
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js">
</script>
<script type="text/javascript">
	
	(function() {
	
	    var x,y;
	    var canvas = $('canvas');
	    var ctx = canvas.getContext("2d");

	    canvas.onmousedown = function(event) {
	        x = event.clientX - this.offsetLeft;
	        y = event.clientY - this.offsetTop;
	
	        document.onmousemove = function(event) {
	            var x1 = event.clientX - canvas.offsetLeft;
	            var y1 = event.clientY - canvas.offsetTop;
				huabi(x, y, x1, y1, ctx);
	            x = x1;
	            y = y1;
	        }
	    }
	
	    document.onmouseup = function() {
	        this.onmousemove = null;
	    }
	
	})();
	
	function $(selector) {
	    return document.querySelector(selector);
	}
	
	function huabi(startX, startY, endX, endY, ctx) {
	    ctx.beginPath();
	    ctx.globalAlpha = 1;
	    ctx.lineWidth = 36;
	    ctx.strokeStyle = "white";
	    ctx.moveTo(startX, startY);
	    ctx.lineTo(endX, endY);
	    ctx.closePath();
	    ctx.stroke();
	}
	
	
	function exportCanvasAsPNG(fileName) {
	    var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext("2d");

		ctx.clearRect(0, 0, canvas.width,canvas.height);

	}
	
	
	//图片转成Buffer
	function dataURItoBlob(dataURI) {
	    var byteString = atob(dataURI.split(',')[1]);
	    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
	    var ab = new ArrayBuffer(byteString.length);
	    var ia = new Uint8Array(ab);
	    for (var i = 0; i < byteString.length; i++) {
	        ia[i] = byteString.charCodeAt(i);
	    }
	    return new Blob([ab], {type: mimeString});
	}
	

	function UploadPic() {
	    // generate the image data
	    var Pic = document.getElementById("canvas").toDataURL("image/jpeg");
	    console.log(Pic)
		// var blob = dataURItoBlob(Pic);
		
		var reslut = document.getElementById("result");

		reslut.innerHTML="正在努力识别...."
		
		// const sleep = time => {
		//  return new Promise(resolve => setTimeout(resolve,time)
		//  ) } 
		//  sleep(10000).then(()=>{ alert('sas')})
		
		var formData = new FormData(); 
		formData.append('file',Pic);  //添加图片信息的参数
		
	    // Sending the image data to Server
		
		jQuery.ajax({
		    url: '/predict',
		    type: 'POST',
		    cache: false, //上传文件不需要缓存
		    data: formData,
		    processData: false, // 告诉jQuery不要去处理发送的数据
		    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
		    success: function (data) {
				reslut.innerHTML=data
		    },
		    error: function (data) {
		        console.log(data)
		    }
		}); 
		
	  //   $.ajax({
	  //       type: 'POST',
	  //       url: '139.9.131.190:5000/',
	  //       data: formData,
			// processData: false, // 告诉jQuery不要去处理发送的数据
			// contentType: false, // 告诉jQuery不要去设置Content-Type请求头
	  //       success: function (msg) {
	  //           reslut.innerText=msg.data
	  //       },
			// error: function (data) {
			//         console.log(data)
			//     }
	  //   });
	}
	
</script>